<template>
	<view class="go-back">
		<view git class="back-icon" @click="goToList"></view>
	</view>
	<view class="body-box">
		<detail-banner autoplay :info="data.img_list" map="img" height="544" dot-mode="dot"></detail-banner>
		<view class="base-info">
			<view class="title">{{data.name}}</view>
			<view class="desc">“{{data.describe}}”</view>
			<view class="tags">
				<view class="tag-normal">{{typeFormat(data.type)}}</view>
				<view class="tag-offical" v-if="data.is_partner">See Wow合作商铺</view>
			</view>
			<view class="address">
				<image class="add-icon" src="/static/icons/address.png" mode=""></image>
				<view class="address-text">{{data.address}}</view>
				<image class="dh-icon" src="/static/icons/dh.png" mode="" @click="openLocation(data.lng, data.lat)"></image>
			</view>
			<view class="telephone">
				<image class="tel-icon" src="/static/icons/tel.png" mode=""></image>
				<view>{{data.contact}}</view>
			    <view class="contact" @click="makePhoneCall(data.contact)">联系店家&nbsp;<uni-icons type="right" size="15" color="#7B7B7B" class="back-icon" style="display: inline-block"></uni-icons></view>
			</view>
		</view>
		<view class="friend-level">
			<view class="top">
				<view class="level">
					<view class="title">宠物友好度：</view>
					<view class="score-box">
						<image class="score" src="/static/icons/fscore.png" mode="" v-for="c in fcount"  :key="c"></image>
						<image class="score" src="/static/icons/hscore.png" mode="" v-for="c in hcount"  :key="c"></image>
						<image class="score" src="/static/icons/uscore.png" mode="" v-for="c in ucount"  :key="c"></image>
					</view>
				</view>
<!-- 				<view class="question">
					<image class="q" src="/static/icons/wen.png" mode=""></image>
				</view> -->
			</view>
			<view class="bottom">
			    <scroll-view scroll-x class="scroll-box">
			      <image class="small-box" :class="formatClass(item)" v-for="item in data.friendly_type" :key="item"  :src="formatSrc(item)"></image>
			    </scroll-view>
			  </view>
			  
		</view>
		<view class="content" v-if="data.content">
			<view class="show-box" >
				<mp-html :content="data.content"  style="white-space: pre-wrap;"></mp-html>
			</view>
		</view>
		<view class="ing-activity" v-if="data.activity_list">
			<view class="title">在办活动</view>
			<!-- <uni-swiper-dot  :current="current" field="content" :mode="mode" :dots-styles="dotsStyle"> -->
				<swiper class="swiper-box" @change="change"  circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"   :indicator-active-color="indicatorActiveColor" >
					<swiper-item v-for="(item, index) in data.activity_list" :key="item.id"  @click="detail(item.id)">
						<view class="swiper-item">
							<view class="status" :class="{'status-gray': (item?.status > 3 && item?.status < 7) || item?.status == 8}" >{{ statusFormat(item?.status, item.enroll_date_start, item.enroll_date_end) }}</view>
							<view class="name">{{item.show_title}}</view>
							<view class="user-info">
								<view class="avatar"><img :src="item?.user_info?.avatar || '/static/images/logo.png'" class="img"/></view>
								<view class="uname">{{item.user_info.name}}</view>
								<view class="cert"><image class="cert-icon" src="/static/icons/cert.png" mode="" v-if="item.user_info &&  item.user_info.merchant_cert_status == 2"/></view>
							</view>
							<view class="times"><image class="times-icon" src="/static/icons/times.png" mode=""></image>{{item.show_time}}</view>
							<view class="address"> <image class="add-icon" src="/static/icons/address.png" mode=""></image> {{item.address}}</view>
							<view class="imgs">
								<view class="img" :style="'background-image:url('+ imgsrc +')'" v-for="imgsrc in item.show_imgs" :key="index"  ></view>
							</view>
							<view class="enroll">
								<view class="enroll-num">{{item.enroll_num}}人报名</view>
								<view class="enroll-price">
									<span v-for="(item1,index) in JSON.parse(item.price_level)" :key="index">
										¥{{ item1.price }}<span v-if="index+1 < (JSON.parse(item.price_level).length)">/</span>
									</span>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			<!-- </uni-swiper-dot> -->
		</view>
		<view class="share" v-if="data.note_list">
			<view class="title">宠友分享</view>
			<view class="item-box" v-for="item in data.note_list" :key="item.id" @click="noteDetail(item.id)">
			  <view class="note-user">
				  <image :src="item.avatar" class="avatar"></image>
				  <view class="uname">{{item.nick}}</view>
			  </view>
			  <view class="note-info">
				  <view class="title">{{item.title}}</view>
				  <view class="text" v-if="item.desc">{{item.desc}}</view>
			  </view>
			  <view class="one-img" v-if="item.banner.length==1">
				  <!-- <image :src="item.pict_url.src" ></image>	 -->
				 <view class="pic" :style="'background-image:url('+ item.pict_url.src +')'"  ></view>	
			  </view>
			  <view class="img-list"   v-if="item.banner.length >1">
			        <view class="pic" :style="'background-image:url('+ banner.src +')'" v-for="(banner, index) in item.banner" :key="index"  ></view>	  
			  </view>
			  <view class="note-comment">
				  <!-- <view class="pltext">小白爱吃番茄：可爱</view> -->
				  <view class="pl">
					  <image src="/static/icons/pl.png" class="icon"></image>
					  <view class="num">{{item.comment_num}}</view>
				  </view>
				  <view class="zan">
					  <image src="/static/icons/zan.png" class="icon"></image>
					  <view class="num">{{item.like_num}}&nbsp;</view>
				  </view>

			  </view>
			</view>
		</view>
	</view>
	<footer-menu></footer-menu>
</template>
<script>
	import config from '../../network/config'
	export default {
		data() {
			return {
				merchantId:0,
				data:{
				},
				current: 0,
				mode: 'round',
				fcount:0,
				ucount:0,
				hcount:0,
				
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				indicatorColor:'#00CAC0',
				indicatorActiveColor:'#00CAC0',
				
				dotsStyle: {
					width: 6,           
					bottom: 40,
					backgroundColor: 'rgba(255,255,255, .7)',
					border: '1px solid #666',
					color: '#fff',
					selectedBackgroundColor: '#00CAC0',
					selectedBorder: '1px solid #00CAC0'
				}
				
				
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			  console.log(res.target)
			}
			return {
			  title: this.data.name,
			  path: '/pages/merchant/detail?merchantId='+this.merchantId
			}
		},
		onLoad(options) {
			if (options.merchantId) {
				this.merchantId = options.merchantId;
				this.getDetail();
		    }
		},
		onPullDownRefresh() {
			this.getDetail()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			noteDetail(id){
				const url = `${config.x5jWeb}/article/show-${id}.html`
				uni.navigateTo({
					url:'/pages/webview/index?url=' + url
				})
			},
			onChange(e) {
			      this.x = e.detail.x;
			      console.log("滑块位置：", this.x);
			    },
			// 详情
			async getDetail(refresh = false) {
				const res = await this.$request.get('/api/merchant/detail',{
					merchant_id: this.merchantId,
				})
				if (res.code == 200) {
					this.data = res.data
					this.data.content= res.data.content.replace(/<img/gi, '<img class="content-img"');
					this.data.friendly_type = res.data.friendly_type.split(',');
					this.fcount = Math.floor(this.data.score);
					this.ucount = 5 - Math.ceil(this.data.score);
					this.hcount = 5 - this.fcount - this.ucount;
					
				}else{
					uni.showToast({
						title: '获取信息失败',
						icon: 'none'
					})
					return
				}
			},
			goToList(){
				uni.navigateBack({
					delta: 1,
				});
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/detail/index?activityId='+id
				})
			},
			makePhoneCall(phone){
				if (phone.length <=0) {
					return ;
				}
				var m = phone.split(",");
				uni.makePhoneCall({
					phoneNumber: m[0]
				});
			},
			openLocation(lng,lat) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
				})
			},
			formatClass(type){
				return 'small-box-'+type
			},
			formatSrc(type){
				type=Number(type);
				switch (type){
					case 1:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/snyh.png';
					break;
					case 2:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/swyh.png';
					break;
					case 3:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/ycpyh.png';
					break;
					case 4:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/tgcyyh.png';
					break;
					case 5:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/kldyh.png';
					break;
					case 6:
					return 'https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/dxqyh.png';
					break;
				}
			},
			typeFormat(type) {
				switch (type){
					case 1:
					return '咖啡店';
					break;
					case 2:
					return '饮品店';
					break;
					case 3:
					return '酒吧';
					break;
					case 4:
					return '餐厅';
					break;
					case 5:
					return '其他';
					break;
				}
			},
			statusFormat(status, start, end) {
				switch (status){
					case 1:
						const now = new Date().getTime()
						const	s = new Date(start?.replace(/\-/g,'/')).getTime(),
							e = new Date(end?.replace(/\-/g,'/')).getTime()
						if (s <= now && e >= now) {
							//return '报名进行中'
							return '进行中'
						} else {
							return '进行中'
						}						
						break;
					case 2:
						//return '报名进行中'
						return '进行中'
						break;
					case 3:
						return '报名结束'
						break;
					case 4:
						return '已取消'
						break;
					case 5:
						return '审核中'
						break;
					case 6:
						return '审核未通过'
						break;
					case 7:
						return '活动进行中'
						break;
					case 8:
						return '活动已结束'
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.body-box{
	background-color: #F3F7F9;
}
.go-back{
	position: fixed;
	width:100%;
	height: 88rpx;
	overflow: hidden;
	z-index:999;
	top:88rpx;
	.back-icon{
		width: 64rpx;
		height: 64rpx;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
		background-size: 100% 100%;
		float: left;
		margin-left:18rpx;
		margin-top:16rpx;
		
	}
}
.base-info{
	position: relative;
	width: 718rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	margin:0 auto;
	margin-top:-40rpx;
	z-index:9999;
	overflow: hidden;
	padding-bottom:20rpx;
	.title{
		width: 670rpx;
		height: auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left:24rpx;
		margin-top:40rpx;
	}
	.desc{
		width: 670rpx;
		height: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #00CAC0;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left:24rpx;
		margin-top:24rpx;
	}
	.tags{
		width: 670rpx;
		height: 46rpx;
		margin-left:24rpx;
		margin-top:8rpx;
		overflow: hidden;
		.tag-normal{
			width: auto;
			height: 46rpx;
			line-height: 46rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			background: #F5F5F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #C1C1C1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: center;
			font-style: normal;
			text-transform: none;
			float: left;
			transform: rotateZ(0deg);
		}
		.tag-offical{
			float: left;
			width: 234rpx;
			height: 46rpx;
			line-height: 46rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-left: 8rpx;
			background: #EBFBFA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #00CAC0;
			transform: rotateZ(0deg);
		}
	}
	.address{
		position: relative;
		width: 670rpx;
		height: auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left:24rpx;
		margin-top:32rpx;
		.add-icon {
			float: left;
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		.address-text{
			width: 620rpx;
		}
		.dh-icon{
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			top:-10rpx;
			right: -8rpx;
		}
		
	}
	.telephone{
		position: relative;
		width: 670rpx;
		height: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left:24rpx;
		margin-top:24rpx;
		.tel-icon {
			float: left;
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		.contact{
			position: absolute;
			width: 140rpx;
			height: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7B7B7B;
			text-align: right;
			font-style: normal;
			text-transform: none;
			top:0rpx;
			right: -8rpx;
		}
	}

}
.friend-level{
	width: 718rpx;
	height: 198rpx;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	margin:0 auto;
	margin-top:16rpx;
	overflow: hidden;
	background-image: url('https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwyh-bg.png');
	background-size:100% 100%;
	.top{
		position: relative;
		width:674rpx;
		height: 40rpx;
		margin:0 auto;
		margin-top:24rpx;
		overflow: hidden;
		.level{
			width: auto;
			height: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			.title{
				float: left;
				width: auto;
				height: 36rpx;
				line-height: 36rpx;
			}
			.score-box{
				float: left;
				width: 200rpx;
				height: 36rpx;
				.score{
					display: inline-block;
					width: 36rpx;
					height:36rpx;
				}
			}

		}
		.question{
			position: absolute;
			right: 0;
			top:0;
			.q{
				width: 32rpx;
				height:32rpx;
			}
		}
	}
	.bottom {
	  margin-top:24rpx;
	  width: 694rpx;
	   margin-left:24rpx;
	   height: 90rpx;
	}
	
	.scroll-box {
	  width: 100%;
	  height: 90rpx; /* 设置滚动容器的高度 */
	  white-space: nowrap; /* 防止小 box 换行 */
	}
	
	.small-box {
	  display: inline-block; /* 将小 box 设置为行内块元素 */
	  width: auto;
	  height: 90rpx;
	  background: #FFFFFF;
	  border-radius: 16rpx 16rpx 16rpx 16rpx;
	  margin-right: 8rpx; /* 设置小 box 之间的间距 */
	  text-align: center;
	  box-sizing: border-box; /* 包含 padding 和 border */
	}
	.small-box-1{
		width: 224rpx;
	}
	.small-box-2{
		width: 214rpx;
	}
	.small-box-3{
		width: 192rpx;
	}
	.small-box-4{
		width: 236rpx;
	}
	.small-box-5{
		width: 190rpx;
	}
	.small-box-6{
		width: 224rpx;
	}
	
}
.content{
	width: 718rpx;
	min-height: 100rpx;
	overflow: hidden;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	margin:0 auto;
	margin-top:16rpx;
	padding-top:16rpx;
	padding-bottom: 16rpx;
	.show-box{
		width: 686rpx;
		height: auto;
		margin:0 auto;
	}
}
.ing-activity{
	width: 718rpx;
	height: auto;
	margin: 0 auto;
	margin-top:24rpx;
	.title{
		width: 100%;
		height: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 24rpx;
	}
	.swiper-box{
		width: 100%;
		height: 580rpx;
		.swiper-item{
			width: 100%;
			height: 580rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			margin-bottom: 16rpx;
			.status{
				width: 124rpx;
				height: 42rpx;
				line-height:42rpx;
				background: linear-gradient( 136deg, #37E465 0%, #2FDBCA 46%, #1AC7DF 100%);
				border-radius: 24rpx 0rpx 8rpx 0rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.status-gray{
				width: 124rpx;
				height: 42rpx;
				background: #CCCCCC;
				border-radius: 24rpx 0rpx 8rpx 0rpx;
				line-height:42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.name{
				width: 596rpx;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 16rpx;
				margin-top:16rpx;
				margin-bottom: 16rpx;
			}
			.user-info{
				display: block;
				width: 500rpx;
				height: 30rpx;
				margin-left: 16rpx;
				.avatar{
					width: 36rpx;
					height: 36rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 0rpx solid #F7F7F7;
					float:left;
					.img{
						width: 36rpx;
						height: 36rpx;
						border-radius: 18rpx;
					}
					margin-right: 10rpx;
				}
				.uname{
					width: auto;
					height: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7B7B7B;
					text-align: left;
					font-style: normal;
					text-transform: none;
					float: left;
				}
				.cert{
					.cert-icon{
						width: 30rpx;
						height: 30rpx;
						margin-left: 16rpx;
						float: left;	
					}
				}
			
			}
			.times{
				display: block;
				clear: both;
				width: 100%;
				margin-top: 20rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
				float: left;
				margin-bottom: 10rpx;
				.times-icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 16rpx;
					float: left;
					margin-right: 10rpx;
				}
			}
			.address{
				display: block;
				clear: both;
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
				.add-icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 16rpx;
					float: left;
					margin-right: 10rpx;
				}
				
			}
			.imgs{
				clear: both;
				width: 100%;
				height: 220rpx;
				margin-top:24rpx;
				margin-left: 16rpx;
				.img{
					width: 220rpx;
					height: 220rpx;
					border-radius: 16rpx;
					float: left;
					margin-right:14rpx ;
					overflow:hidden;
					background-position: center center;
					background-repeat: no-repeat;
					-webkit-background-size:cover;
					-moz-background-size:cover;
					background-size:cover;
				}
			}
			.enroll{
			   width:702rpx;
			   margin-top: 32rpx;
			   margin-left: 16rpx;
			   .enroll-num{
				   width: 200rpx;
				   height: 30rpx;
				   font-family: PingFangSC, PingFang SC;
				   font-weight: 400;
				   font-size: 24rpx;
				   color: #7B7B7B;
				   text-align: left;
				   font-style: normal;
				   text-transform: none;
				   float: left;
			   }
			   .enroll-price{
				   position: relative;
				   width: auto;
				   height: 46rpx;
				   font-family: PingFangSC, PingFang SC;
				   font-weight: 500;
				   font-size: 32rpx;
				   color: #00CAC0;
				   text-align: right;
				   font-style: normal;
				   text-transform: none;
				   float: right;
				   margin-right:16rpx;
				   z-index:2;
			   }
			   .enroll-price::before {
			   			    display: block;
			        content: "";
			        position: absolute;
			        bottom: 0;
			        left: 0;
			        width: 100%;
			        height: 14rpx;
			        background-color: #DDFFFD;
			   				z-index:-1;
			      }
				
			}
		}
	}
}
.share{
	width:718rpx;
	height: auto;
	margin:0 auto;
	margin-top:24rpx;
	overflow: hidden;
	.title{
		width: 100%;
		height: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 24rpx;
	}
	.item-box{
		width: 718rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom:16rpx;
		padding-bottom: 24rpx;
		overflow: hidden;
		.note-user{
			width:500rpx;
			height: 56rpx;
			margin-top:24rpx;
			margin-left:16rpx;
			.avatar{
				width: 56rpx;
				height: 56rpx;
				border-radius:56rpx;
				float: left;
			}
			.uname{
				float: left;
				width: auto;
				height: 36rpx;
				line-height: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #7B7B7B;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 8rpx;
				margin-top:10rpx;
			}
		}
		.note-info{
			width: 622rpx;
			height: auto;
			margin-left:80rpx;
			overflow: hidden;
			.title{
				width: 100%;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
			}
			.text{
				margin-top:-18rpx;
				width: 100%;
				height: 78rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #262626;
				line-height: 39rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
			}
		}
		.note-comment{
			width: 622rpx;
			height:32rpx;
			margin-left:80rpx;
			margin-top:24rpx;
			overflow: hidden;
			.icon{
				display: inline-block;
				width: 32rpx;
				height:32rpx;
				float: left;
			}
			.num{
				display: inline-block;
				width: auto;
				height: 28rpx;
				line-height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left:8rpx;
				margin-top:4rpx;
				float: left;
			}
			.pltext{
				width: 216rpx;
				height: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				text-align: left;
				font-style: normal;
				text-transform: none;
				float: left;
				margin-right:200rpx;
				overflow: hidden;
			}
			.zan{
				width: auto;
				height: 32rpx;
				float: right;
				overflow: hidden;
			}
			.pl{
				width: auto;
				height: 32rpx;
				float: right;
				overflow: hidden;
			}
		}
		.img-list{
			width: 506rpx;
			height: auto;
			margin-left:80rpx;
			overflow: hidden;
			margin-top:24rpx;
			.pic{
				width: 160rpx;
				height: 160rpx;
				border-radius: 4rpx;
				margin-left:8rpx;
				margin-bottom:8rpx;
				float: left;
				overflow:hidden;
				background-position: center center;
				background-repeat: no-repeat;
				-webkit-background-size:cover;
				-moz-background-size:cover;
				background-size:cover;
			}
		}
		.one-img{
			width: 506rpx;
			height: 506rpx;
			margin-left:80rpx;
			overflow: hidden;
			margin-top:24rpx;
			.pic{
				width: 100%;
				height: 100%;
				border-radius: 4rpx;
				overflow:hidden;
				background-position: center center;
				background-repeat: no-repeat;
				-webkit-background-size:cover;
				-moz-background-size:cover;
				background-size:cover;
			}
		}
	}
}


</style>
